<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文章分类</title>
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.css">
  <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../font/iconfont.css">
  <link rel="stylesheet" href="../../css/wenzhangguanli/wenzhangfenlei.css">
  <script src="../../javaScript/wenzhangguanli/wenzhangfenleishuju.js"></script>
  <script src="../../javaScript/public.js"></script>
  <link rel="stylesheet" href="../../css/public.css">
  <!-- <script src="../../javaScript/orderform/orderformlist.js"></script> -->
</head>

<body>
  <div class="container nav_header">
    <div class="row">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-3 col-xs-3">
            当前状态
            <select class="drop_down">
              <option value="">请选择当前状态</option>
              <option value="启用">启用</option>
              <option value="禁用">禁用</option>
            </select>
          </div>
          <div class="col-md-3 col-xs-3">
            分类名称
            <input type="text" placeholder="分类名称" class="drop_down" value="">
          </div>
          <div class="col-md-3 col-xs-3"></div>
          <div class="col-md-3 col-xs-3"></div>
        </div>
      </div>
      <div class="col-md-2 col-xs-2 content_right">
        <button class="sousuo"><span class="iconfont icon-sousuo"></span>搜索</button>
        <button class="chongzhi"><span class="iconfont icon-zhongzhizhongzhi"></span>重置</button>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-xs-10">
        <div class="row">
          <div class="col-md-1 col-xs-1">
            <span class="iconfont icon-shujukuliebiao">&nbsp;&nbsp;</span>数据列表
          </div>
          <div class="col-md-1 col-xs-1">
            <button class="shanchu"><span class="iconfont icon-shanchu"></span>删除</button>
          </div>
        </div>
      </div>
      <div class="col-md-2 content_right"> <button class="xinzeng"><span>+ </span>新增</button></div>
    </div>
    <table class="table table-striped mtable">
      <thead id="thead">
        <tr class="table_row mwidth">
          <th><input type="checkbox" name="" id="check" class="box-checkbox"></th>
          <th>序号</th>
          <th>分类名称</th>
          <th>文章数量</th>
          <th>当前状态</th>
          <th>排序</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="mytbody" class="table_row table_content">

      </tbody>
    </table>
    <div class="row table_page">
      <!-- <div class="col-md-9 col-xs-9"> <input type="checkbox" id="" value="">&nbsp&nbsp全选</div>
      <nav aria-label="Page navigation" class="col-md-2 col-xs-2">
        <ul class="pagination pagenum">
         
        </ul>
      </nav> -->
      <div class="col-md-7 col-xs-7 xuanze">
        <input type="checkbox" class="box-checkbox quanxuan" value=""><span> 全选</span>
      </div>
      <nav aria-label="Page navigation" class="col-md-4 col-xs-4 fpagenum">
        <div class="back stop">
          <span class="iconfont">&#xe64b;</span>
        </div>
        <ul class="pagenum">

        </ul>
        <div class="next">
          <span class="iconfont">&#xe62b;</span>
        </div>
      </nav>
      <div class="col-md-1 col-xs-1 page_num">
        <ul name="" id="page_num">
          <li value="10">10条/页<span class="iconfont icon-arrow-down"></span></li>
          <li value="15">15条/页</li>
          <li value="20">20条/页</li>
          <li value="25">25条/页</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="deltankuang">
    <div><span class="quxiao">X</span></div>
    <div>
      <span>？</span><span>&nbsp;&nbsp; 确定要删除当前数据吗？</span>
    </div>
    <div class="row del_xiugai">
      <div class="col-md-6 col-xs-6"></div>
      <div class="col-md-3 col-xs-3 queding"><button>确定</button></div>
      <div class="col-md-3 col-xs-3 quxiao"><button>取消</button></div>
    </div>
  </div>
  <script>

    //删除弹框
    function del(e) {
      let deltankuang = document.getElementById('deltankuang')
      deltankuang.style.display = 'block'
      $('.quxiao').click(function () {
        $("#deltankuang").css("display", 'none')
      })
      $('.queding').click(function () {
        $("#deltankuang").css("display", 'none')
        for (let i = 0; i < fenData.length; i++) {
          if (fenData[i].id == $($(e).parent().parent()).find('td')[1].innerHTML) {
            fenData.splice(i, 1)
          }
        }
        init(fenData, '.pagenum', ".mtable", parseInt($('#page_num').find("li").val()), pagecontent, content, 1)

      })

    }

    var ipts = document.querySelectorAll('tbody input');
    // 获取tbody下的tr
    var trs = document.querySelectorAll('tbody tr');
    var iptsArray = Array.from(ipts);   // 把伪数组转换为真数组
    // 点击全选选择所有的复选框
    check.onclick = function () {
      if (this.checked) {
        for (let i = 0; i < ipts.length; i++) {
          ipts[i].checked = true;    //每个复选框设置为勾选状态
          trs[i].className = 'selected';    //增加class
        }
      } else {
        for (i = 0; i < ipts.length; i++) {
          ipts[i].checked = false;    //每个复选框设置为不勾选状态
          trs[i].className = '';    //删除class
        }
      }
    }
    // 单独的选中效果
    for (let i = 0; i < ipts.length; i++) {
      ipts[i].onchange = function () {
        if (ipts[i].checked) {
          ipts[i].checked = true;
          trs[i].className = 'selected';
        } else {
          ipts[i].checked = false;
          trs[i].className = '';
        }
        // 全部选中
        var res1 = iptsArray.every(function (ele) {
          return ele.checked;
        })
        if (res1) {
          check.checked = true;
        }
        // 全部不选中
        var res2 = iptsArray.every(function (ele) {
          return !(ele.checked);
        })
        if (res2) {
          check.checked = false;
        }
        // 半选状态
        if (!res1 && !res2) {
          check.indeterminate = true;
        } else {
          check.indeterminate = false;
        }
      }
    }

    let nowpage = 1;
    let content = "`" +
      '<tr class="mwidth">' +
      '<td>' +
      '<input type="checkbox" id="" value="" class="box-checkbox">' +
      '</td>' +
      ' <td>${fenData[i].id}</td>' +
      '<td>${fenData[i].name}</td>' +
      '<td>${fenData[i].num}</td>' +
      ' <td class="icon_anniu"> <span class="iconfont icon-anniu_kaiqi"></span><span class="iconfont icon-anniu_guanbi"></span>   </td>' +
      '<td>${fenData[i].sort}</td>' +
      '<td><span onclick="del(this)" class="btn_shanchu"><a>删除</a></span>&nbsp&nbsp<span> <a href="../wenzhangguanli/xinzengwenzhang.html">编辑</a></span></td>' +
      '</tr>' + '`'
    let pagecontent = "`" +
      "<li>" +
      "${i+1}" +
      "</li>"
      + "`"
    window.onload = function () {
      page(fenData, ".mtable", 10, content, 1)
      pagenum(fenData, ".pagenum", 10, pagecontent)
      ingo(fenData, '.pagenum', ".mtable", 10, pagecontent, content)
      $('.icon-anniu_kaiqi').click(function () {
        $(this).css({
          display: 'none',
        })
        console.log('.icon-anniu_kaiqi')
        $(this).siblings().css({
          display: 'block',
        })
      })
      $('.icon-anniu_guanbi').click(function () {
        $(this).css({
          display: 'none',
        })
        $(this).siblings().css({
          display: 'block',
        })
      })
    }

    //全选按钮
    let checkedBoole
    $('.quanxuan').click(function () {
      if ($(this).prop('checked') == true) {
        $(".table_content input").prop("checked", true)
      } else {
        $(".table_content input").prop("checked", false)
      }
    })
    $('.table_content input').click(function () { //获取checked是否为选中
      console.log($("input[checkbox='false']"));
      console.log($("input[type='checkbox']"));
      if ($(this).prop('checked') == true) { //选中的时候执行这个结果
        $('.shanchu').click(function () {
          console.log($("input[checked='true']"));
        })

      } else { //未选中的时候执行这个结果
        checkedBoole = $(this).prop('checked')
        $('.shanchu').click(function () {
          console.log(11111)
        })

      }
    })
    //重置
    $('.chongzhi').click(function () {
      $('#mytbody').html()
      page(fenData, ".mtable", 15, content, 1)
      pagenum(fenData, ".pagenum", 10, pagecontent)
      ingo(fenData, '.pagenum', ".mtable", 15, pagecontent, content)
    })
    $('.bianji').click(function (params) {

    })
    //新增
    $('.xinzeng').click(function () {
      window.location.href = '../wenzhangguanli/xinzengwenzhang.html'
    })

  </script>
</body>

</html>